{% extends "base.html" %}
{% from "macros/form_field.html" import form_field %}
{% block title %}Profilo{% endblock %}
{% block content %}
<div class="content-section">
	<div class="media">
        <img class="account-img rounded-circle mx-auto d-block" src="{{ image_file }}" height="150" width="150" >
        <div class="media-body">
			<h2 class="account-heading">{{ profile.name }}'s Profile</h2>
			<p class="text-secondary">email: {{ profile.email }}</p>
			<h3>I tuoi dati:</h3>
		</div>
	</div>
	<!--FORM-->
<div class="content-section">
        <form method="GET" enctype="multipart/form-data">
            {{ form.hidden_tag() }}
            <fieldset class="form-group">
{#                <legend class="border-bottom mb-4">Your personal infos:</legend>#}
                <div class="form-group shadow-sm p-3 mb-5 bg-white rounded">

                    {{ form.username.label(class="form-control-label") }}
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <div class="input-group-text">@</div>
                        </div>
                    {% if form.username.errors %}
                        {{ form.username(class="form-control form-control-lg is-invalid") }}
                        <div class="invalid-feedback">
                            {% for error in form.username.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.username(class="form-control form-control-lg") }}
                    {% endif %}
                    </div>
                    <h2>Competenze</h2>

                    <div class="container">
                    	<div class="row">

                    		<!-- <form id="framework_form" method="post"> -->
                    		<div class="col-sm-8">
                    		<label>Skills available</label>
                                </div>
                                <div class="col-sm-4" style="text-align:right">
</div>
                                <div class="col-12 mb-5">
                            {{ form.owned_skills(id="f", type="text", class="form-control form-control-chosen") }}
                                            <!-- Button trigger modal -->


                    		<!-- </form> -->


                    		</div>


                    	</div>
                </div>



               </div>








            </fieldset>

        </form>
    </div>




	<!-- END FORM-->
</div>
<script type="text/javascript">
	$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})


$('#modal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})




	$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})
</script>

  <script type="text/javascript">

  {#$(".form-control-chosen").attr('disabled', true).trigger("chosen:updated")#}


    $('#myModal').on('shown.bs.modal', function () {
      $('#myInput').trigger('focus')
    })

    $('#exampleModal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var recipient = button.data('whatever') // Extract info from data-* attributes
      // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
      // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
      var modal = $(this)
      modal.find('.modal-title').text('New message to ' + recipient)
      modal.find('.modal-body input').val(recipient)
    })

  </script>
<!-- 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.6/chosen.jquery.min.js"></script>

{% endblock %}